<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>会员登录</title>
    <link rel="stylesheet" th:href="@{/static/before/css/login.css}"/>
    <script src="../../static/before/js/jigsaw.js"></script>
    <link rel="stylesheet" href="../../static/before/css/jigsaw.css">
    <script src="../../static/before/js/jquery-3.4.1.min.js"></script>

    <!--<link rel="stylesheet" href="../../static/before/css/styles.css">-->

</head>

<body>
<!-- login -->
<div class="top center">
    <!--<div class="logo center">
        <a href="index.html" target="_blank"><img src="./image/logo-orange-login.png" alt="" /></a>
    </div>-->
</div>
<form id="form_login" th:action="@{login}" method="post"  class="form center">
    <div class="login">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">会员登录</div>
                <div class="right fr">您还不是我们的会员？<a href="register.html" target="_self">立即注册</a></div>
                <div class="clear"></div>
                <div class="xian center"></div>
            </div>
            <div class="login_main center" >
                    <div class="alert alert-danger alert-dismissible"  role="alert" style="position: absolute;padding: 11px;display: block">
                        错误信息: <span class="error-mess" th:text="${errormess}" style="color: red"></span>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="right:0px;"><span aria-hidden="true">&times;</span></button>
                    </div>
                <div class="username">用户名:&nbsp;
                    <input class="userName" type="text" name="phone" placeholder="请输入你的用户名"/>
                    <span name="usernameVal" id="usernameVal"></span></div>
                <div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;
                    <input class="passwordes" type="password" name="password" placeholder="请输入你的密码"/>
                    <span name="pwdVal" id="pwdVal"></span></div>
                <div class="username">
                    <div class="left fl">验证码:&nbsp;
                        <input class="yanzhengma" type="text" name="code" placeholder="请输入验证码"/></div>
                    <div class="right fl"><img onclick="this.src='captcha?r'+Date.now()" src="captcha"/></div>
                    <div class="clear"></div>
                    <span name="codeval" id="code"></span>
                </div>
                <!--滑块验证-->
                <div class="group">
                    <div class="container">
                        <div id="captcha" style="position: relative" data-type="password"></div>
                        <div id="msg">
                            <span id="yanzheng_group"/>
                        </div>
                    </div>
                </div>
                <div class="login_submit">
                    <button  class="button" type="button" name="button">立即登录</button>
                </div>

            </div>

        </div>
    </div>
</form>
<script>
    /*鼠标获取焦点时*/
    $(document).ready(function () {
        var flag = false;
        var flag1 = false;
        var flag2 = false;
        var flag3 = false;
        $(".userName").focus(function () {
            $("#usernameVal").empty()
        })
        $(".passwordes").focus(function () {
            $("#pwdVal").empty()
        })
        $(".yanzhengma").focus(function () {
            $("#codeval").empty()
        })
        /* 离开鼠标焦点时，激发表单验证*/
        //失去密码焦点时
        $(".passwordes").blur(function () {
            pwds();
        })

        function pwds() {
            //获取用户输入密码
            var pwd = $(".passwordes").val();
            if (pwd == null || pwd == "") {
                $("#pwdVal").html("密码不能为空").css("color", "red ");

            } else if (pwd.length < 6) {
                $("#pwdVal").html("密码长度不能小于6").css("color", "red ");
            } else {

                return flag1 = true;
            }
        }

        $(".userName").blur(function () {
            phone();
        })

        function phone() {
            var phone = $(".userName").val();
            var regex = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if (phone == null || phone == "") {
                $("#usernameVal").html("手机号不能为空").css("color", "red ");

            } else if (regex.test(phone) == false) {
                $("#usernameVal").html("手机格式不正确").css("color", "red ");
            } else {
                $("#emaiVal").html("手机格式正确").css("color", "green")
                return flag2 = true;
            }
        }

        $(".yanzhengma").blur(function () {
            code();
        })

        function code() {
            //获取用户输入密码
            var pwd = $(".yanzhengma").val();
            if (pwd == null || pwd == "") {
                $(".code").html("验证码不能为空").css("color", "red ");

            } else if (pwd.length != 4) {
                $(".code").html("请输入4位数").css("color", "red ");

            } else {
                return flag3 = true;
            }
        }

        //验证captcha
        jigsaw.init(document.getElementById('captcha'), function () {
            document.getElementById('msg').innerHTML = '验证成功！';
            flag = true;
        })
        /*         $.get("/yanzhengPhone" + $(this).attr("/phone"), function (data) {
                                      console.log( "text====",regex );
                                      data = eval('(' + data + ')');
                                      if(data.msg=="true"){
                                          $("#usernameVal").html("格式正确").css("color","green")
                                          return  true;

                                      }else{
                                          $("#usernameVal").html("无该用户").css("color","red")
                                          return  false;
                                      }
                                  })*/
        /*     $.ajax({
                 "url":"/yanzhengPhone",
                 "type":"get",
                 "data":"phone="+phone,
                 "dataType" : "json",
                 "success":function(data){

                     if(data.error=="true"){
                         $("#emaiVal").html("邮箱已被使用").css("color","red")
                         return  false;

                     }else{
                         $("#emaiVal").html("你的邮箱帐号可以使用").css("color","green")
                         return  true
                     }

                 }
             });*/
        /**
         * 提交表单 当表单验证成功后提交
         */

            $(".button").click(function () {


                if(flag==false){
                    $("#yanzheng_group").html("验证结果不正确").css("color", "red ");
                }
                if(flag1==false){
                    $("#pwdVal").html("密码不正确").css("color", "red ");
                }
                if(flag2==false){
                    $("#usernameVal").html("用户名不正确").css("color", "red ");
                }
                if(flag3==false){
                    $("#code").html("验证码错误").css("color", "red ");
                }   if (flag == true && flag1 == true && flag2 == true && flag3 == true) {

                    $("#form_login").submit();
                }

            })




    })

</script>
<!--<script type="text/javascript">
    $(document).ready(function () {
    var kk = $(".error-mess").val();
    alert(kk)
    console.log(kk+"sads");
    if (kk!=null&&kk!="") {
        $('.error-mess').text(kk);
        $('.alert-danger').css('display','block');
    }
    })

   /* /!**
     * 判断非空
     *
     * @param val
     * @returns {Boolean}
     *!/
    function isEmpty(val) {
        val = $.trim(val);
        if (val == null)
            return true;
        if (val == undefined || val == 'undefined')
            return true;
        if (val == "")
            return true;
        if (val.length == 0)
            return true;
        if (!/[^(^\s*)|(\s*$)]/.test(val))
            return true;
        return false;
    }*/
</script>-->
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div>
</body>
</html>